<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>按订单开票</title>
    <link rel="stylesheet" href="mui/css/mui.css">
    <script src="mui/js/mui.js"></script>
    <link rel="stylesheet" href="css/style.css?v1.1.2">
    <script src="js/jquery-1.11.3.js"></script>
</head>
<body onscroll="swipeUp()" style="padding-bottom: 11rem;">
<div class="mui-content invoice-order">
    <div class="mui-card order">
        <div class="order-top">
            <span>订单号:354565548654565</span>
            <p>2018-01-02 20:25:05</p>
        </div>
        <div class="order-center">
            <h2 class="mui-input-row mui-checkbox mui-left input-checkbox">
                <label><input name="checkbox" value="Item 1" type="checkbox" >翠江明珠小区2期05单元605</label></h2>
            <p>支付状态：已支付</p>
            <p>订单状态：已处理</p>
        </div>
        <div class="order-footer"><b>共2个月 &nbsp; 合计：￥230.00</b></div>
    </div>
    <div class="mui-card order">
        <div class="order-top">
            <span>订单号:354565548654565</span>
            <p>2018-01-02 20:25:05</p>
        </div>
        <div class="order-center">
            <h2 class="mui-input-row mui-checkbox mui-left input-checkbox">
                <label><input name="checkbox" value="Item 1" type="checkbox" >翠江明珠小区2期05单元605翠江明珠小区2期05单元605</label></h2>
            <p>支付状态：已支付</p>
            <p>订单状态：已处理</p>
        </div>
        <div class="order-footer"><b>共2个月 &nbsp; 合计：￥230.00</b></div>
    </div>
    <div class="mui-card order">
        <div class="order-top">
            <span>订单号:354565548654565</span>
            <p>2018-01-02 20:25:05</p>
        </div>
        <div class="order-center">
            <h2 class="mui-input-row mui-checkbox mui-left input-checkbox">
                <label><input name="checkbox" value="Item 1" type="checkbox" >翠江明珠小区2期05单元605翠江明珠小区2期05单元605</label></h2>
            <p>支付状态：已支付</p>
            <p>订单状态：已处理</p>
        </div>
        <div class="order-footer"><b>共2个月 &nbsp; 合计：￥230.00</b></div>
    </div>
</div>
<div class="payment-footer">
    <div class="mui-row invoice-order--footer">
        <div class="mui-col-xs-12 ">
            共2个订单，总计460.00元
        </div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-3 all-select"><div class="mui-checkbox mui-left"><input style="left: 1rem" name="checkbox" type="checkbox"> 全选</div></div>
        <div class="mui-col-xs-9">
            <div class="mui-row">
                <div class="mui-col-xs-7 payment-money"></div>
                <button onclick="submit()" type="button" class="mui-btn mui-btn-primary mui-btn-block mui-col-xs-5">下一步</button>
            </div>
        </div>
    </div>
</div>
<div class="notice-details-bottom" style="display:none;bottom: 9.5rem;">— 上滑加载更多 —</div>
<script src="layer_mobile/layer.js"></script>
<script>
    function submit() {
        layer.open({
            type: 1
            ,content: `<div class="invoice-pop"><h1>温馨提示</h1><div>一张发票只能对应一个地址，多个地址需分开申请多张发票。</div><div><a href="invoice_apply.html">确认</a></div></div>`
            ,anim: 'false'
            ,style: `width:80%;border-radius:.5rem;`
        })
    }
</script>
<script>
    let isLoad = true,bottomElem = $(".notice-details-bottom");
    function swipeUp() {
        let elemHeight=parseInt($('body').css("height"));
        let scrollTop,maxScroll;
        scrollTop = $(window).scrollTop();
        maxScroll = elemHeight - $(window).height();
        if(scrollTop >= maxScroll || elemHeight<$(window).height()){
            if(isLoad){
                mui('html').on("swipeup","body",loadMore);
                bottomElem.show()
            }else{
                bottomElem.show().text('— 没有更多了 —');
            }
        }else{
            mui('html').off("swipeup","body");
            bottomElem.hide()
        }
    }
    function loadMore() {
        console.log("你正在向上滑动");
        //模拟数据
        let html = `
            <div class="mui-card order">
        <div class="order-top">
            <span>订单号:354565548654565</span>
            <p>2018-01-02 20:25:05</p>
        </div>
        <div class="order-center" onclick="window.location.href='order_details.html'">
            <h2>翠江明珠小区2期05单元605 <a href="javascript:void (0)">详情</a></h2>
            <p>支付状态：未支付</p>
            <p>订单状态：未处理</p>
        </div>
        <div class="order-footer"><b>共2个月 &nbsp; 合计：￥230.00</b></div>
    </div>
        `;

        //请求
        /*
                $.ajax({
                    url:"",
                    type:"POST",
                    dataType:'JSON',
                    beforeSend:function(){
                        layer.open({
                            type: 2
                            ,content: '加载中'
                        });
                    },
                    success:function () {
                        layer.closeAll();
                        $(".notice-details-bottom").hide();
                        $(".mui-content").append(html+html);
                        mui('html').off("swipeup","body");
                    },
                    error:function () {
                        layer.closeAll();
                    }
                });
                */
        //测试模拟请求用
        layer.open({
            type: 2
            ,content: '加载中'
        });
        setTimeout(function () {
            bottomElem.hide();
            layer.closeAll();
            $(".mui-content").append(html+html);
            isLoad =false;//是否还有数据
            mui('html').off("swipeup","body");
        },3000)
        //#End
    }
</script>
</body>
</html>